import { type App } from 'vue'
import {
  VxeTable,
  VxeColumn,
  VxeColgroup,
  VxeGrid,
  type VxeGridProps,
  type VxeGridListeners
} from 'vxe-table'
import 'vxe-table/lib/style.css'

// ...可选 UI
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import { useI18nStore } from '@/stores/i18n'

// 导入主题变量，也可以重写主题变量
import 'vxe-table/styles/cssvar.scss'

// 渲染组件
import '@/components/c-render/c-cell-render'

export const GRID_BASE_CONFIG: VxeGridProps = {
  height: 600,
  border: true,
  round: true,
  size: 'mini',
  scrollY: {
    enabled: true
  },
  scrollX: {
    enabled: true
  },
  loading: false,
  sortConfig: {
    multiple: true
  },
  columnConfig: {
    resizable: true
  },
  exportConfig: {
    types: ['txt', 'csv'],
    type: 'csv'
  }
}

/** 事件标识 */
export enum EventCode {
  '导出数据' = 'exportData',
  '刷新' = 'update'
}

/** 事件标识类型 */
type EventCodeType = {
  [key in keyof typeof EventCode]: string;
};

/** 基本右击菜单配置 */
export const GRID_BASE_MENU_CONFIG = {
  body: {
    options: [[
      '导出数据',
      '刷新'
    ].map((item) => ({
      code: (EventCode as any)[item] as EventCodeType[keyof typeof EventCode],
      name: item
    }))]
  }
};

/** 通用事件 */
export const gridEvents: VxeGridListeners<any> = {
  menuClick(options) {
    switch (options.menu.code) {
      case EventCode['导出数据']:
        options.$grid.openExport()
        break;
      case EventCode['刷新']:
        options.$grid.reloadData(options.$grid.getData())
        break;
    }
  }
}

/** 加载VxeTable插件 */
export function lazyVxeTable(app: App) {
  app.use(VxeTable)
  app.use(VxeColumn)
  app.use(VxeColgroup)
  app.use(VxeGrid)
  app.use(VxeUI)
  useI18nStore().setVxeUII18n();
}